<template>
    <div class="contact container">
        <h1>联系我们</h1>
        <div class="contact-details">
            <div class="contact-info">
                <p><strong>地址：</strong> 芜湖市南陵县籍山镇金色水岸3期D区1号楼</p>
                <p><strong>联系人：</strong> 夏经理</p>
                <p><strong>电话：</strong> 18527307932</p>
                <p><strong>邮箱：</strong> 842063349@qq.com</p>
            </div>
            <div class="contact-form">
                <h2>给我们留言</h2>
                <form @submit.prevent="handleSubmit">
                    <div class="form-group">
                        <label for="name">您的姓名</label>
                        <input type="text" id="name" v-model="form.name" required>
                    </div>
                    <div class="form-group">
                        <label for="phone">您的手机号</label>
                        <input type="tel" id="phone" v-model="form.phone" required>
                    </div>
                    <button type="submit">提交</button>
                </form>
            </div>
        </div>
        <div class="map-container">
            <l-map ref="map" v-model:zoom="zoom" :center="center" style="height: 400px; width: 100%;"
                @ready="onMapReady">
                <l-tile-layer
                    url="https://t{s}.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=02d651ce813590834418362fbafcad52"
                    :subdomains="['0', '1', '2', '3', '4', '5', '6', '7']" layer-type="base" name="Tianditu"></l-tile-layer>
                <l-tile-layer
                    url="https://t{s}.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=02d651ce813590834418362fbafcad52"
                    :subdomains="['0', '1', '2', '3', '4', '5', '6', '7']" name="Tianditu Labels"></l-tile-layer>
                <l-marker :lat-lng="center"></l-marker>
            </l-map>
        </div>
    </div>
</template>

<script>
import "leaflet/dist/leaflet.css";
import { LMap, LTileLayer, LMarker } from "@vue-leaflet/vue-leaflet";
import L from 'leaflet';

// --- Start of the fix ---
// This manually imports the marker images and resets the default icon paths
// to fix a common issue with bundlers like Vite.
import iconUrl from 'leaflet/dist/images/marker-icon.png';
import shadowUrl from 'leaflet/dist/images/marker-shadow.png';
import iconRetinaUrl from 'leaflet/dist/images/marker-icon-2x.png';

L.Icon.Default.mergeOptions({
    iconRetinaUrl,
    iconUrl,
    shadowUrl,
});
// --- End of the fix ---

export default {
    name: 'Contact',
    components: {
        LMap,
        LTileLayer,
        LMarker,
    },
    data() {
        return {
            zoom: 16,
            center: [30.926708, 118.340403], // 金色水岸幼儿园
            form: {
                name: '',
                phone: ''
            }
        };
    },
    methods: {
        onMapReady() {
            // The map is initialized and ready, now we can safely invalidate its size.
            this.$nextTick(() => {
                if (this.$refs.map && this.$refs.map.leafletObject) {
                    this.$refs.map.leafletObject.invalidateSize();
                }
            });
        },
        handleSubmit() {
            // In a real application, you would send this data to a server.
            alert(`感谢您的留言, ${this.form.name}！我们会尽快通过电话 ${this.form.phone} 与您联系。`);
            this.form.name = '';
            this.form.phone = '';
        }
    }
}
</script>

<style scoped>
.contact-details {
    display: flex;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 40px;
}

.contact-info,
.contact-form {
    flex: 1;
}

.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
}

.form-group input {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

button {
    padding: 10px 15px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

button:hover {
    background-color: #0056b3;
}

.map-container {
    margin-top: 20px;
    border: 1px solid #ddd;
}

/* Responsive Styles */
@media (max-width: 768px) {
    .contact-details {
        flex-direction: column;
    }
}
</style>
